<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="我的团队" title-size="36" title-color="#333"></u-navbar>
        <view class="tabsView">
          <u-tabs-swiper
            ref="uTabs"
            font-size="32"
            :list="tabsList"
            :current="current"
            @change="tabsChange"
            :is-scroll="false"
            :show-bar="false"
            bar-width="50"
            active-color="#10A28F"
            swiper-width="750rpx"
          >
          </u-tabs-swiper>
        </view>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item v-for="(sitem, sindex) in tabsList" class="swiperItem" :key="sindex">
          <z-paging
            ref="paging"
            v-model="itemList[sindex]"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :auto-show-back-to-top="true"
            empty-view-text="暂时还没有数据咯~"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            :empty-view-img-style="imgStyle"
          >
            <view class="goodsItemView">
              <view
                v-if="(scurrent === 0 || scurrent === 1) && itemCount[scurrent] >= 0"
                class="count-team dis-flex flex-y-center"
                style="margin-top: 20rpx"
              >
                <u-icon name="/static/count-team.png" size="30"></u-icon>
                <view style="margin-left: 10rpx">
                  <text>共有</text>
                  <text class="bold">{{ itemCount[scurrent] }}个</text>
                  <text>{{ scurrent === 0 ? '直' : '间' }}</text>
                  <text>推用户</text>
                </view>
              </view>
              <view class="itemView" v-for="(item, index1) in itemList[sindex]" :key="index1">
                <view class="content dis-flex flex-y-between">
                  <view class="user-box dis-flex flex-y-center">
                    <u-avatar :src="item.user.avatar" size="80"></u-avatar>
                    <view class="info">
                      <view class="tel">{{ item.user.mobile }}</view>
                      <view class="type">{{ item.typeName }}</view>
                    </view>
                  </view>
                  <view class="rightView">
                    <view class="date"
                      >{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}
                    </view>
                    <view class="type">注册时间</view>
                  </view>
                </view>
                <view class="share-user" v-if="sindex == 1"
                  >推荐人：{{ item.fatherUser.mobile }}
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      show: false,
      current: 0,
      scurrent: 0,
      resStatus: '',
      tabsList: [
        {
          name: '我的直推',
          status: '',
          commentStatus: ''
        },
        {
          name: '我的间推',
          status: 0,
          commentStatus: ''
        }
      ],
      itemList: [[], []],
      itemCount: [-1, -1],
      order_id: ''
    }
  },
  onLoad(res) {
    this.current = Number(res.index) ? Number(res.index) : 0
    this.scurrent = Number(res.index) ? Number(res.index) : 0
  },

  onShow() {
    let self = this
    this.queryList()
  },
  methods: {
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.itemList[this.current].length == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      let url
      if (this.scurrent == 1) {
        url = '/app-api/brokerage/user/page-grandpa'
      } else {
        url = '/app-api/brokerage/user/page-father'
      }
      this.$u
        .get(url, {
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging[this.scurrent].complete(res.data.list)
          this.itemCount[this.scurrent] = res.data.total
        })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background: #f0f1f2;
}

.goodsItemView {
  padding: 0 20rpx;
}

.count-team {
  width: 710rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: auto;
  padding: 20rpx;
  color: #666666;

  .bold {
    font-size: 30rpx;
    color: #333333;
    padding: 0 4rpx;
    font-weight: 600;
  }
}

.itemView {
  background: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
  margin-top: 20rpx;

  .info {
    margin-left: 18rpx;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .rightView {
    text-align: right;
    height: 80rpx;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .type {
    font-size: 20rpx;
    color: #999999;
  }

  .share-user {
    font-size: 24rpx;
    color: #fa453c;
    padding: 10rpx 0 0 98rpx;
  }
}
</style>
